const datas = [
    { name: '司马懿', imgSrc: '01.jpg' },
    { name: '女娲', imgSrc: '02.jpg' },
    { name: '百里守约', imgSrc: '03.jpg' },
    { name: '亚瑟', imgSrc: '04.jpg' },
    { name: '虞姬', imgSrc: '05.jpg' },
    { name: '张良', imgSrc: '06.jpg' },
    { name: '安其拉', imgSrc: '07.jpg' },
    { name: '李白', imgSrc: '08.jpg' },
    { name: '阿珂', imgSrc: '09.jpg' },
    { name: '墨子', imgSrc: '10.jpg' },
    { name: '鲁班', imgSrc: '11.jpg' },
    { name: '嬴政', imgSrc: '12.jpg' },
    { name: '孙膑', imgSrc: '13.jpg' },
    { name: '周瑜', imgSrc: '14.jpg' },
    { name: 'XXX', imgSrc: '15.jpg' },
    { name: 'XXX', imgSrc: '16.jpg' },
    { name: 'XXX', imgSrc: '17.jpg' },
    { name: 'XXX', imgSrc: '18.jpg' },
    { name: 'XXX', imgSrc: '19.jpg' },
    { name: 'XXX', imgSrc: '20.jpg' }
]

// 1.获取元素
const a = document.querySelector('#create')
const ul = document.querySelector('.list')
// 2.给a绑定点击事件
a.addEventListener('click', function (e) {
    e.preventDefault()
    // 循环遍历数组
    ul.innerHTML=''
    datas.forEach(function (item) {
        // 创建一个新节点
        const li = document.createElement('li')
        // 修改新节点内容
        // console.log(item)
        li.innerHTML = `<img src="./uploads/heros/${item.imgSrc}" alt="" title="${item.name}">`
        ul.appendChild(li)
    })
})